<template>
  <div class="home-container">
      <van-nav-bar class="page-nav-bar" title="首页" fixed    />
      <van-tabs class="channels-tabs" v-model:active="active" @change="handleChange">
  <van-tab title="公共通知">
    <notification-list key="notification-list"></notification-list>
  </van-tab>


  <van-tab title="公共活动">
    <event-list key="event-list"></event-list>
  </van-tab>

</van-tabs>


  </div>  
</template>
  

<script>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import NotificationList from './components/notification-list.vue';
import EventList from './components/event-list.vue';
import { onBeforeRouteLeave } from 'vue-router';

export default {

components: {
  NotificationList,
  EventList
},
setup() {
  const active = ref(0);
  const route = useRoute();
  const router = useRouter();

  // 判断 URL 参数中是否有 tabIndex，如果有则切换到对应的选项卡
  if (route.query.tabIndex) {
    active.value = Number(route.query.tabIndex);
  }
  onBeforeRouteLeave((to, from, next) => {
      // 获取当前滑块位置
      const scrollY = window.scrollY || window.pageYOffset;
      // 存储滑块位置到 sessionStorage 中
      sessionStorage.setItem('scrollY'+active.value, scrollY);

      next();
    });

  // 监听选项卡切换事件，将当前选项卡索引存储到 URL 参数中
  const handleChange = index => {

    const i=index==1?0:1;
    const scrollY = window.scrollY || window.pageYOffset;
      sessionStorage.setItem('scrollY'+i, scrollY);
    if(index==0){
      //如果是选项卡一
      const scrollY = sessionStorage.getItem('scrollY0');
    if (scrollY) {
      //重新渲染
      window.scrollTo(0, parseInt(scrollY));
    }else{
      window.scrollTo(0, parseInt(0));
    }
    }else{
      const scrollY = sessionStorage.getItem('scrollY1');
    // 如果存在记录，则滚动到该位置
    if (scrollY) {
      //重新渲染
      window.scrollTo(0, parseInt(scrollY));
    }else{
      window.scrollTo(0, parseInt(0));
    }

    }
    router.replace({
    query: {
      ...route.query,
      tabIndex: index
    }
  });
};




  return {
    active,
    handleChange,
    onBeforeRouteLeave
  };
}
};

</script>


<style>
.home-container .search-button {
  width: 300px;
  height: 30px;
  background-color: #5babfb;
  border: none;
  font-size: 18px;
  color: #fff;
}
.channels-tabs .van-tab {
  min-width: 120px;
  border-right: 1px solid #edeff3;
  font-size: 16px;
  color: #777;
}
.channels-tabs .van-tab--active {
  color: red;
}
.channels-tabs .van-tabs__line {
  background-color: #3296fa;
  width: 20px;
  height: 6px;
}
.channels-tabs .hamburger-btn {
  /* 固定定位 */
  position: fixed;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 32px;
  background-color: #fff;
  /* 设置透明度 */
  opacity: 0.902;
  /* 设置图标的大小 */
  font-size: 23px;
}
.channels-tabs .placeholder {
  flex-shrink: 0;
  width: 66px;
  height: 32px;
}
.channels-tabs .van-tabs__wrap {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  z-index: 1;
}
.home-container {
padding-bottom: 50px;
}
.van-tab{
  overflow: hidden;
}

</style>